<template>
  <a-layout-header ref="headerEl" class="text-white h5-editor__header gap-x-4">
    <left-outlined @click="backEvent" />

    <template v-if="editorState.multiGraph">
      <a-dropdown
        :getPopupContainer="() => headerEl?.$el"
        overlayClassName="h5-editor-dropdown"
        :trigger="['hover', 'click']"
      >
        <span class="text-xl cursor-pointer">
          {{ mockData[active] }}
          <DownOutlined />
        </span>
        <template #overlay>
          <Scrollbar class="flex-1 overflow-hidden">
            <a-menu :selectedKeys="[active]" @click="handleProjectChange" class="content-items w-44" style="">
              <a-menu-item v-for="(item, idx) in mockData" :key="idx" class="content-item">
                {{ item }}
              </a-menu-item>
            </a-menu>
          </Scrollbar>
        </template>
      </a-dropdown>
    </template>
    <span v-else class="inline-block">界面编辑</span>
    <i class="flex-1"></i>
    <div class="flex items-center gap-x-6">
      <a-slider
        class="header-zoom_slider"
        :tooltipVisible="false"
        :step="0.05"
        v-model:value="editorState.zoom"
        :min="0.3"
        :max="2"
      />
      <a-dropdown placement="bottom">
        <a-button class="header-zoom_show">
          {{ Number.parseInt(Math.round(editorState.zoom * 100).toString()) }}%
          <DownOutlined />
        </a-button>
        <template #overlay>
          <a-menu class="w-40">
            <a-menu-item class="px-4" key="enlarge">
              放大
              <div class="flex gap-x-0.5">
                <code>Ctrl</code>
                <span>+</span>
                <code>+</code>
              </div>
            </a-menu-item>
            <a-menu-item class="px-4" key="narrow">
              缩小
              <div class="flex gap-x-0.5">
                <code>Ctrl</code>
                <span>+</span>
                <code>-</code>
              </div>
            </a-menu-item>
            <a-menu-item class="px-4" key="overview">
              全览
              <div class="flex gap-x-0.5">
                <code>F</code>
              </div>
            </a-menu-item>
            <a-menu-item key="4">400%</a-menu-item>
            <a-menu-item key="2">200%</a-menu-item>
            <a-menu-item key="1.5">150%</a-menu-item>
            <a-menu-item key="1">100%</a-menu-item>
            <a-menu-item key="0.5">50%</a-menu-item>
            <a-menu-item key="0.25">25%</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <a-divider class="header-divider" type="vertical" />
    <img :src="headerIcons.search" class="header-icons" />
    <!-- <img :src="headerIcons.notice" class="header-icons" /> -->
    <a-divider class="header-divider" type="vertical" />
    <a-tooltip overlayClassName="editor-tooltip" placement="top">
      <template #title>
        <small>预览</small>
      </template>
      <img :src="headerIcons.preview" class="header-icons" />
    </a-tooltip>
    <a-tooltip overlayClassName="editor-tooltip" placement="top">
      <template #title>
        <small>自动保存</small>
      </template>
      <img :src="headerIcons.upload" class="header-icons" />
    </a-tooltip>
    <a-tooltip overlayClassName="editor-tooltip" placement="top">
      <template #title>
        <small>分享</small>
      </template>
      <img :src="headerIcons.share" class="header-icons" />
    </a-tooltip>
    <a-divider class="header-divider" type="vertical" />
    <a-button type="primary" size="small" shape="round">发布</a-button>
    <img :src="headerIcons.help" />
  </a-layout-header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Scrollbar from '@cms/scrollbar'
import headerIcons from '../assets/header'
import { editorState, backEvent } from '../mixins/useEditorState'
const headerEl = ref<{ $el: HTMLElement }>()
const active = ref<number>(1)

const mockData = [
  'IOT视频平台',
  '极浪视频',
  '物资管理视频',
  '视频工单平台',
  '风谷平台视频',
  '审核管理视频',
  '桃桃丝视频',
  '乐乐淘视频',
  'blibil视频',
  '樱花视频平台',
  'listen1视频'
]

const handleProjectChange = ({ key }: { key: number }) => {
  active.value = key
}
</script>

<style scoped></style>
